<script setup lang="ts">
import { Swiper } from '~/components/swiper';

// 自定义右边内容的数据
const rightContent = {
  title: '自定义标题',
  subtitle: '副标题内容',
  description: '这里是自定义的描述内容，可以根据需要修改成任何文本内容。',
  features: ['特点1', '特点2', '特点3'],
  buttonText: '了解更多',
  buttonLink: '#'
};

// 处理按钮点击
const handleButtonClick = () => {
  console.log('按钮被点击');
  // 这里可以添加跳转或其他逻辑
  if (rightContent.buttonLink !== '#') {
    window.location.href = rightContent.buttonLink;
  }
};
</script>

<style scoped>
.image-container {
  display: grid;
  gap: 20px;
  padding: 20px;
  justify-items: center;
  /* 网格项目水平居中 */
  align-items: stretch;
  /* 网格项目拉伸填充 */
  /* min-height: 100vh; */
  /* 让容器至少占满视口高度 */
  grid-auto-rows: 1fr;
  /* 网格行等高 */
}

.image-item {
  width: 100%;
  display: flex;
  /* 使用flex布局 */
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  min-height: 400px;
  /* 设置最小高度 */
}

.image-item img {
  width: 100%;
  height: 100%;
  display: block;
  transition: all 0.3s ease;
  /* 添加过渡效果 */
}

.image-item img:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  /* 添加阴影效果 */
}

/* 自定义右边内容样式 */
.right-content {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  backdrop-filter: blur(10px);
  min-height: 400px;
  /* 与左边图片保持相同的最小高度 */
  box-sizing: border-box;
  /* 包含padding在内的高度计算 */
}

.right-content h2 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.right-content h3 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  opacity: 0.9;
  font-weight: 400;
}

.right-content p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 25px;
  opacity: 0.95;
}

.features-list {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}

.features-list li {
  padding: 8px 0;
  font-size: 1.1rem;
  position: relative;
  padding-left: 25px;
}

.features-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #4ade80;
  font-weight: bold;
  font-size: 1.2rem;
}

.cta-button {
  background: linear-gradient(45deg, #ff6b6b, #ee5a24);
  color: white;
  border: none;
  padding: 15px 30px;
  font-size: 1.1rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.6);
}

/* PC端：768px及以上屏幕宽度，左右排列 */
@media (min-width: 768px) {
  .image-container {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    /* 确保左右两边等高 */
  }

  .image-item img {
    height: 300px;
    /* PC端固定高度 */
    object-fit: cover;
    /* 保持图片比例并填充容器 */
    border-radius: 8px;
    /* 添加圆角 */
    margin: 0 auto;
    /* 图片自身居中 */
  }
  
  .image-item {
    min-height: 400px;
    /* PC端最小高度 */
  }
  
  .right-content {
    padding: 50px;
    min-height: 400px;
    /* PC端最小高度 */
  }
  
  .right-content h2 {
    font-size: 3rem;
  }
}

/* 平板端：481px-767px屏幕宽度 */
@media (min-width: 481px) and (max-width: 767px) {
  .image-container {
    grid-template-columns: 1fr;
  }

  .image-item img {
    max-width: 350px;
    /* 平板端图片最大宽度 */
    height: 250px;
    /* 平板端固定高度 */
    object-fit: cover;
    border-radius: 6px;
  }
  
  .image-item {
    min-height: 300px;
    /* 平板端最小高度 */
  }
  
  .right-content {
    min-height: 300px;
    /* 平板端最小高度 */
  }
}

/* 移动端：480px及以下屏幕宽度 */
@media (max-width: 480px) {
  .image-container {
    grid-template-columns: 1fr;
  }

  .image-item img {
    max-width: 280px;
    /* 移动端图片最大宽度 */
    height: 200px;
    /* 移动端固定高度 */
    object-fit: cover;
    border-radius: 4px;
  }
  
  .image-item {
    min-height: 250px;
    /* 移动端最小高度 */
  }
  
  .right-content {
    min-height: 250px;
    /* 移动端最小高度 */
    padding: 30px;
  }
  
  .right-content h2 {
    font-size: 2rem;
  }
}
</style>

<template>
  <div class="image-container">
    <div class="image-item left">
      <img src="https://nicecustomize.oss-us-west-1.aliyuncs.com/img/b7310f79644243bf40660ab5bfd355a701061234.webp"
        alt="">
    </div>
    <div class="image-item right">
      <div class="right-content">
        <h2>{{ rightContent.title }}</h2>
        <h3>{{ rightContent.subtitle }}</h3>
        <p>{{ rightContent.description }}</p>
        <ul class="features-list">
          <li v-for="(feature, index) in rightContent.features" :key="index">
            {{ feature }}
          </li>
        </ul>
        <button class="cta-button" @click="handleButtonClick">
          {{ rightContent.buttonText }}
        </button>
      </div>
    </div>
  </div>
</template>